// 封装axios

// 1. axios.create 创建一个实例  (baseURL / timeout / 大数处理)
// 2. 请求拦截器 ( token request headers )
// 3. 响应拦截器 ( 1.token失效 401  2.当后端不以200作为接口状态标识 手动处理)
import axios from 'axios'
import store from '@/store'
const instance = axios.create({
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
  timeout: 10000
})

// 请求拦截器
instance.interceptors.request.use((config) => {
  // 在发送请求之前做些什么
  // config 注入token
  // 1. 从vuex中拿到token
  // 2. 放到request header
  const token = store.state.user.profile.token
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, (error) => {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// http code 200 - 300 只要接口的状态在200 - 300之间 不管当前接口是成功还是失败 都走第一个回调
// http code 不在200 - 300 之间 会走第二个回调
instance.interceptors.response.use((response) => {
  // 对响应数据做点什么
  return response
}, (error) => {
  // 对响应错误做点什么
  return Promise.reject(error)
})

// 需求:
// 封装一个函数 在函数中自动适配get和post请求的参数位置
// 传递参数的格式必须是一个对象
// 使用request进行接口调用  request('url','get', data).then(res=>{})
// get / Get / GET -> GET

function request (url, method, data) {
  // 俩个事儿  1 instance方法执行  2.把执行结果return
  return instance({
    url,
    method,
    [method.toUpperCase() === 'GET' ? 'params' : 'data']: data
  })
}

export default request

// 补充：
// 1. 如果遇到同一个项目里 需要配置多套axios实例
// 解决办法需要几个 就通过axios.create创建几个实例

// 2. 拦截器都是支持多个串联使用的 前一个拦截器处理之后的结果会交给下一个拦截器继续处理

// 3. instance = axios + 额外的配置 = 定制化之后的axios
